<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/detail.css">
</head>
<body>
   
    <header>
        <div class="header_top">
            <p class="follow_us">
                <span>关注我们</span>
                <a href="#" class="icon_weibo"></a>
                <a href="#" class="icon_baidu"></a>
                <a href="#" class="icon_weixin"></a>
            </p>
            <p class="head_link">
                <a href="../html/resign.html" id="login">登录</a>|
                <a href="../html/login.html" id="register">注册</a>|
                <a href="">销售网点</a>|
                <a href="">服务网点</a>
            </p>
        </div>

        <div class="head_center">
            <a href="#" class="logo"></a>
            <div class="head_center_sou">
                <p class="search">
                    <input type="text" placeholder="搜索你想要的产品" class="txtSearch">
                    <input type="button" value="" id="btnSearch"><br/>
                    <a href="#">RTX2060</a>&nbsp;|&nbsp;
                    <a href="#">i5-9400</a>&nbsp;|&nbsp;
                    <a href="#">1660Ti</a>&nbsp;|&nbsp;
                    <a href="#">i7-9750H</a>
                </p>
                <p class="shopcart">
                    
                    <a href="../html/cart.html">购物车<span id="percount">0</span></a>
                </p>
            </div>
        </div>

        <div class="head_nav">
            <ul class="nav">
                <li class="first_li"><a href="">全部商品分类<i></i></a>
                    <div class="all" style="display: none;">
                        <ul>
                            <li><a href="javascript:;">笔记本</a><div class="fenlei">
                                <dl>
                                    <dt><a href=""><img src="http://www.hasee.net/uploadfiles/images/2015/7/20150715071520180.png" alt=""></a></dt>
                                    <dd><h2>至强王者1</h2><h3>超级战神</h3><p>战神GX9-CT5DK</p></dd>
                                </dl>
                                <dl>
                                    <dt><a href=""><img src="http://www.hasee.net/uploadfiles/images/2015/8/20150819062423474.png" alt=""></a></dt>
                                    <dd><h2>强悍性能</h2><h3>战神系列</h3><p>战神Z7M-CT5GA</p><p>战神Z7M-CT5GA</p><p>战神Z7M-CT5GA</p><p>战神Z7M-CT5GA</p><p>战神Z7M-CT5GA</p></dd>
                                </dl>
                                <dl>
                                    <dt><a href=""><img src="http://www.hasee.net/uploadfiles/images/2017/8/20170825030433672.jpg" alt=""></a></dt>
                                    <dd><h2>精盾系列产品</h2><h3>精盾系列</h3><p>KING BOOK-U45S2</p><p>KING BOOK-U45S2</p><p>KING BOOK-U45S2</p><p>KING BOOK-U45S2</p><p>KING BOOK-U45S2</p></dd>
                                </dl>
                                <dl>
                                    <dt><a href=""><img src="http://www.hasee.net/uploadfiles/images/2015/8/20150819060831115.png" alt=""></a></dt>
                                    <dd><h2>卓越体验</h2><h3>飞天系列</h3></dd>
                                </dl>
                            </div></li>
                            <li><a href="javascript:;">优雅本</a><div class="fenlei">
                                <dl>
                                    <dt><a href=""><img src="http://www.hasee.net/uploadfiles/images/2015/7/20150715071520180.png" alt=""></a></dt>
                                    <dd><h2>至强王者2</h2><h3>超级战神</h3><p>战神GX9-CT5DK</p></dd>
                                </dl>
                                <dl>
                                    <dt><a href=""><img src="http://www.hasee.net/uploadfiles/images/2015/8/20150819062423474.png" alt=""></a></dt>
                                    <dd><h2>强悍性能</h2><h3>战神系列</h3><p>战神Z7M-CT5GA</p><p>战神Z7M-CT5GA</p><p>战神Z7M-CT5GA</p><p>战神Z7M-CT5GA</p><p>战神Z7M-CT5GA</p></dd>
                                </dl>
                                <dl>
                                    <dt><a href=""><img src="http://www.hasee.net/uploadfiles/images/2017/8/20170825030433672.jpg" alt=""></a></dt>
                                    <dd><h2>精盾系列产品</h2><h3>精盾系列</h3><p>KING BOOK-U45S2</p><p>KING BOOK-U45S2</p><p>KING BOOK-U45S2</p><p>KING BOOK-U45S2</p><p>KING BOOK-U45S2</p></dd>
                                </dl>
                                <dl>
                                    <dt><a href=""><img src="http://www.hasee.net/uploadfiles/images/2015/8/20150819060831115.png" alt=""></a></dt>
                                    <dd><h2>卓越体验</h2><h3>飞天系列</h3></dd>
                                </dl>
                            </div></li>
                            <li><a href="javascript:;">台式机</a><div class="fenlei">
                                <dl>
                                    <dt><a href=""><img src="http://www.hasee.net/uploadfiles/images/2015/7/20150715071520180.png" alt=""></a></dt>
                                    <dd><h2>至强王者3</h2><h3>超级战神</h3><p>战神GX9-CT5DK</p></dd>
                                </dl>
                                <dl>
                                    <dt><a href=""><img src="http://www.hasee.net/uploadfiles/images/2015/8/20150819062423474.png" alt=""></a></dt>
                                    <dd><h2>强悍性能</h2><h3>战神系列</h3><p>战神Z7M-CT5GA</p><p>战神Z7M-CT5GA</p><p>战神Z7M-CT5GA</p><p>战神Z7M-CT5GA</p><p>战神Z7M-CT5GA</p></dd>
                                </dl>
                                <dl>
                                    <dt><a href=""><img src="http://www.hasee.net/uploadfiles/images/2017/8/20170825030433672.jpg" alt=""></a></dt>
                                    <dd><h2>精盾系列产品</h2><h3>精盾系列</h3><p>KING BOOK-U45S2</p><p>KING BOOK-U45S2</p><p>KING BOOK-U45S2</p><p>KING BOOK-U45S2</p><p>KING BOOK-U45S2</p></dd>
                                </dl>
                                <dl>
                                    <dt><a href=""><img src="http://www.hasee.net/uploadfiles/images/2015/8/20150819060831115.png" alt=""></a></dt>
                                    <dd><h2>卓越体验</h2><h3>飞天系列</h3></dd>
                                </dl>
                            </div></li>
                            <li><a href="javascript:;">商用电脑</a><div class="fenlei">
                                <dl>
                                    <dt><a href=""><img src="http://www.hasee.net/uploadfiles/images/2015/7/20150715071520180.png" alt=""></a></dt>
                                    <dd><h2>至强王者4</h2><h3>超级战神</h3><p>战神GX9-CT5DK</p></dd>
                                </dl>
                                <dl>
                                    <dt><a href=""><img src="http://www.hasee.net/uploadfiles/images/2015/8/20150819062423474.png" alt=""></a></dt>
                                    <dd><h2>强悍性能</h2><h3>战神系列</h3><p>战神Z7M-CT5GA</p><p>战神Z7M-CT5GA</p><p>战神Z7M-CT5GA</p><p>战神Z7M-CT5GA</p><p>战神Z7M-CT5GA</p></dd>
                                </dl>
                                <dl>
                                    <dt><a href=""><img src="http://www.hasee.net/uploadfiles/images/2017/8/20170825030433672.jpg" alt=""></a></dt>
                                    <dd><h2>精盾系列产品</h2><h3>精盾系列</h3><p>KING BOOK-U45S2</p><p>KING BOOK-U45S2</p><p>KING BOOK-U45S2</p><p>KING BOOK-U45S2</p><p>KING BOOK-U45S2</p></dd>
                                </dl>
                                <dl>
                                    <dt><a href=""><img src="http://www.hasee.net/uploadfiles/images/2015/8/20150819060831115.png" alt=""></a></dt>
                                    <dd><h2>卓越体验</h2><h3>飞天系列</h3></dd>
                                </dl>
                            </div></li>
                            <li><a href="javascript:;">周边</a><div class="fenlei">
                                <dl>
                                    <dt><a href=""><img src="http://www.hasee.net/uploadfiles/images/2015/7/20150715071520180.png" alt=""></a></dt>
                                    <dd><h2>至强王者5</h2><h3>超级战神</h3><p>战神GX9-CT5DK</p></dd>
                                </dl>
                                <dl>
                                    <dt><a href=""><img src="http://www.hasee.net/uploadfiles/images/2015/8/20150819062423474.png" alt=""></a></dt>
                                    <dd><h2>强悍性能</h2><h3>战神系列</h3><p>战神Z7M-CT5GA</p><p>战神Z7M-CT5GA</p><p>战神Z7M-CT5GA</p><p>战神Z7M-CT5GA</p><p>战神Z7M-CT5GA</p></dd>
                                </dl>
                                <dl>
                                    <dt><a href=""><img src="http://www.hasee.net/uploadfiles/images/2017/8/20170825030433672.jpg" alt=""></a></dt>
                                    <dd><h2>精盾系列产品</h2><h3>精盾系列</h3><p>KING BOOK-U45S2</p><p>KING BOOK-U45S2</p><p>KING BOOK-U45S2</p><p>KING BOOK-U45S2</p><p>KING BOOK-U45S2</p></dd>
                                </dl>
                                <dl>
                                    <dt><a href=""><img src="http://www.hasee.net/uploadfiles/images/2015/8/20150819060831115.png" alt=""></a></dt>
                                    <dd><h2>卓越体验</h2><h3>飞天系列</h3></dd>
                                </dl>
                            </div></li>
                        </ul>
                    </div>
                </li>
                <li><a href="../index.html">首页</a></li>
                <li><a href="">新品推荐</a></li>
                <li><a href="">PCPad</a></li>
                <li><a href="">今日秒杀</a></li>
                <li><a href="">服务支持</a></li>
            </ul>
        </div>
    </header>

    <div class="main">
        <div class="main-in">
            <div class="title">
                <a href="">首页</a><span> > </span><a href="">笔记本</a><span> > </span><a href="" class="leibie">1</a><span> > </span>2<span class="chanpin"></span>
            </div>
            <div class="detail">
                <div class="detail-pic">

                </div>
                <div class="detail-inf">
                    <!-- <h2>1</h2>
                    <p>1</p>
                    <div class="price" style="background: #f1f1f1;">
                        <span>商城价：</span><i>111</i>
                        <div class="content">
                            <p>月销量：<span style="color: red;">0</span></p>
                            <p>累计评论：<span style="color: red;">0</span></p>
                        </div>
                    </div>
                    <dl>
                        <dt>选择版本：</dt>
                        <dd>
                            <ul>
                                <li><a href="javascript:">KING BOOK-X55A1</a></li>
                                <li><a href="javascript:">KING BOOK-X55A1</a></li>
                                <li><a href="javascript:">KING BOOK-X55A1</a></li>
                                <li><a href="javascript:">KING BOOK-X55A1</a></li>
                                <li><a href="javascript:">KING BOOK-X55A1</a></li>
                                <li><a href="javascript:">KING BOOK-X55A1</a></li>
                                <li><a href="javascript:">KING BOOK-X55A1</a></li>
                                <li><a href="javascript:">KING BOOK-X55A1</a></li>
                                <li><a href="javascript:">KING BOOK-X55A1</a></li>
                                <li><a href="javascript:">KING BOOK-X55A1</a></li>
                                <li><a href="javascript:">KING BOOK-X55A1</a></li>
                            </ul>
                        </dd>
                    </dl>
                    <dl >
                        <dt>选择套餐：</dt>
                        <dd><ul>
                            <li><a href="JavaScript:;">官方标配</a></li>
                        </ul></dd>
                    </dl >
                    <dl style="line-height: 33px;" class="number">
                        <dt>数&nbsp;&nbsp;量</dt>
                        <dd><input type="text" value="1"><span><i style="background: url(http://www.hasee.net/images/prod_bg3.png) 0 0 no-repeat;"></i><i style="background: url(http://www.hasee.net/images/prod_bg3.png) 0 -19px no-repeat;"></i>件</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>库存5件</b></dd>
                    </dl>
                    <dl class="promise">
                        <dt>服务承诺：</dt>
                        <dd><span style="background: url(http://www.hasee.net/images/icon4_1.png) 0 5px no-repeat;">官方品质保证</span><span style="background: url(http://www.hasee.net/images/icon4_2.png) 0 5px no-repeat;">售后维修保障</span><span style="background: url(http://www.hasee.net/images/icon4_5.png) 0 5px no-repeat;">7天退货 15天换货</span></dd>
                    </dl>
                    <dl class="buy">
                        <dd>
                            <button style="background: #f33c11 url(http://www.hasee.net/images/icon5_1.png) 29px center no-repeat;">立即购买</button>
                            <button style="background: #f33c11 url(http://www.hasee.net/images/icon5_2.png) 29px center no-repeat;">加入购物车</button>
                        </dd>
                    </dl> -->
                </div>
                
            </div>
        </div>
    </div>

    <footer>
        <div class="footer1">
            <div class="foot_top">
                <ul>
                    <li><a href="javascript:;"><img src="http://www.hasee.net/images/icon_1.png" alt=""></a><p>官方品质保障</p></li>
                    <li><a href="javascript:;"><img src="http://www.hasee.net/images/icon_2.png" alt=""></a><p>售后维修保障</p></li>
                    <li><a href="javascript:;"><img src="http://www.hasee.net/images/icon_3.png" alt=""></a><p>新品抢先体验</p></li>
                    <li><a href="javascript:;"><img src="http://www.hasee.net/images/icon_4.png" alt=""></a><p>个性化定制服务</p></li>
                    <li><a href="javascript:;"><img src="http://www.hasee.net/images/icon_5.png" alt=""></a><p>7天退货 15天换货</p></li>
                </ul>
            </div>
            <div class="foot_center">
                <ul>
                    <li>
                        <h2>帮助中心</h2>
                        <ul>
                            <li>购物指南</li>
                            <li>支付方式</li>
                            <li>配送方式</li>
                        </ul>
                    </li>
                    <li>
                        <h2>服务与支持</h2>
                        <ul>
                            <li>售后政策</li>
                            <li>服务网点</li>
                            <li>驱动下载</li>
                        </ul>
                    </li>
                    <li>
                        <h2>神船分舵</h2>
                        <ul>
                            <li>神舟电脑京东官方旗舰店</li>
                            <li>神舟电脑天猫旗舰店</li>
                            <li>神舟新舟专卖店</li>
                        </ul>
                    </li>
                    <li>
                        <h2>关于我们</h2>
                        <ul>
                            <li>公司简介</li>
                            <li>联系我们</li>
                            <li>加入我们</li>
                        </ul>
                    </li>
                    <li>
                        <h2>关注我们</h2>
                        <ul>
                            <li>新浪微博</li>
                            <li>官方微信</li>
                            <li>神舟笔记本吧</li>
                        </ul>
                    </li>
                    <li class="number">
                        <p>商用电脑热线:<span>400-058-9702</span></p>
                        <p>全国客服热线:<span>400-106-9999</span></p> 
                        <p>上午9:00-12:30 &nbsp;下午14:00-18:00（节假日除外）</p>
                    </li>
                </ul>
            </div>

            <div class="foot_bottom">
                All rights reserved © 2015 Hasee<a href="javascript:;">粤ICP备11003995号</a>
                <p><a href="#">网站导航</a>|<a href="#">隐私安全</a>|<a href="#">版权所有</a>|<a href="#">常见问题</a></p>
            </div>
        </div>
    </footer>

    <script src="../js/jquery-1.11.3.min.js"></script>
    <script>
            //导航栏
        $('.first_li').hover(function name(params){
            $('.first_li i').css({background:'url(http://www.hasee.net/images/bg1_t.png)'})
            
            // 二级导航栏
            $('.all').css({display:'block'})
            $('.all ul li').mouseenter(function name(params) {
                // console.log($(this));
                $(this).css('background','white').children().css('color','#f33c11')
                // 商品分类显示
                
                $(this).find('.fenlei').css({display:'block'})
              
            })
            $('.all ul li').mouseleave(function name(params) {
                console.log($(this));
                $(this).css('background','#f33c11').children().css('color','white')
                // 商品分类消失
                $(this).find('.fenlei').css({display:'none'})
               
                
            })
           
            
        },function name(params) {
            $('.all').css({display:'none'})
            $('.first_li i').css({background:'url(image/xiajian.png)'})
        })

        //商品详情
        let searchParams = new URLSearchParams(location.search.slice(1))
        let pid = searchParams.get('pid')
        let uid = localStorage.getItem('id')
        let token = localStorage.getItem('token')
        let username = localStorage.getItem('username')
        $.ajax({
            url:'http://jx.xuzhixiang.top/ap/api/detail.php',
            type:'get',
            data:{id:pid}
        }).then(res=>{
            console.log(res.data);
            let html = ''
            let html2 = ''
            $.each(res,function (i,v) {
                html = `
                <img src="${v.pimg}">
                `
                html1 =`
                <h2>${v.pname}</h2>
                    <p>${v.pdesc}</p>
                    <div class="price" style="background: #f1f1f1;">
                        <span>商城价：</span><i>${v.pprice}</i>
                        <div class="content">
                            <p>月销量：<span style="color: red;">0</span></p>
                            <p>累计评论：<span style="color: red;">0</span></p>
                        </div>
                    </div>
                    <dl>
                        <dt>选择版本：</dt>
                        <dd>
                            <ul>
                                <li><a href="javascript:">KING BOOK-X55A1</a></li>
                                <li><a href="javascript:">KING BOOK-X55A1</a></li>
                                <li><a href="javascript:">KING BOOK-X55A1</a></li>
                                <li><a href="javascript:">KING BOOK-X55A1</a></li>
                                <li><a href="javascript:">KING BOOK-X55A1</a></li>
                                <li><a href="javascript:">KING BOOK-X55A1</a></li>
                                <li><a href="javascript:">KING BOOK-X55A1</a></li>
                                <li><a href="javascript:">KING BOOK-X55A1</a></li>
                                <li><a href="javascript:">KING BOOK-X55A1</a></li>
                                <li><a href="javascript:">KING BOOK-X55A1</a></li>
                                <li><a href="javascript:">KING BOOK-X55A1</a></li>
                            </ul>
                        </dd>
                    </dl>
                    <dl >
                        <dt>选择套餐：</dt>
                        <dd><ul>
                            <li><a href="JavaScript:;">官方标配</a></li>
                        </ul></dd>
                    </dl >
                    <dl style="line-height: 33px;" class="number">
                        <dt>数&nbsp;&nbsp;量</dt>
                        <dd><input type="text" value="1"><span><i style="background: url(http://www.hasee.net/images/prod_bg3.png) 0 0 no-repeat;"></i><i style="background: url(http://www.hasee.net/images/prod_bg3.png) 0 -19px no-repeat;"></i>件</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>库存5件</b></dd>
                    </dl>
                    <dl class="promise">
                        <dt>服务承诺：</dt>
                        <dd><span style="background: url(http://www.hasee.net/images/icon4_1.png) 0 5px no-repeat;">官方品质保证</span><span style="background: url(http://www.hasee.net/images/icon4_2.png) 0 5px no-repeat;">售后维修保障</span><span style="background: url(http://www.hasee.net/images/icon4_5.png) 0 5px no-repeat;">7天退货 15天换货</span></dd>
                    </dl>
                    <dl class="buy">
                        <dd>
                            <button style="background: #f33c11 url(http://www.hasee.net/images/icon5_1.png) 29px center no-repeat; ">立即购买</button>
                            <button style="background: #f33c11 url(http://www.hasee.net/images/icon5_2.png) 29px center no-repeat;" data-id="${v.pid}" class="add-btn">加入购物车</button>
                        </dd>
                    </dl>
                `
            })
            $('.detail-pic').html(html)
            $('.detail-inf').html(html1)
            console.log($('.add-btn'));
            
            $('.add-btn').on('click',function name(params) {
                console.log(1);
                
                let pnum = 1;
                $.ajax({
                    url:'http://jx.xuzhixiang.top/ap/api/add-product.php',
                    type:'get',
                    data:{pid,uid,pnum}
                }).then(res=>{
                    console.log(res);
                    
                    $.ajax({
                    url:'http://jx.xuzhixiang.top/ap/api/cart-list.php',
                    type:'get',
                    data:{id:uid}
                }).then(res=>{
                    console.log(res.data);
                    let count=0
                    $.each(res.data,function name(i,v) {
                        count+=parseInt(res.data[i].pnum)
                    })
                    $('#percount').html(count)
                })

                })
            })
        })

        


        if(token){
                $('#login').html(username)
                $('#register').html('退出')
                $('#register').click(function name(params) {
                    localStorage.removeItem('token')
                    localStorage.removeItem('id')
                    localStorage.removeItem('username')
                    location.href='resign.html'
                })

                //检测购物车中商品数量
                $.ajax({
                    url:'http://jx.xuzhixiang.top/ap/api/cart-list.php',
                    type:'get',
                    data:{id:uid}
                }).then(res=>{
                    console.log(res.data);
                    let count=0
                    $.each(res.data,function name(i,v) {
                        count+=parseInt(res.data[i].pnum)
                    })
                    $('#percount').html(count)
                })




            }
    </script>
</body>
</html>